<%--
  Created by IntelliJ IDEA.
  User: admin
  Date: 2021/8/20
  Time: 19:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/js/jquery-3.5.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        function ajaxsplit(page) {
            //异步ajax分页请求
            $.ajax({
                url:"${pageContext.request.contextPath}/client/ajaxSplit.action",
                data:{"page":page},
                type:"post",
                success:function () {
                    $("#table").load("${pageContext.request.contextPath}/admin/clientView.jsp #table");
                    $("#split").load("${pageContext.request.contextPath}/admin/clientView.jsp #split");
                }
            })
        }
        function insertSubmit(){
            $("#insertForm").submit();
        }
        function updateSubmit(){
            $("#updateForm").submit();

        }
        function del(clientId){
            if (confirm("确定删除吗")) {
                //发出ajax请求进行删除
                $.ajax({
                    url:"${pageContext.request.contextPath}/client/delete.action",
                    data:{"clientId":clientId},
                    type:"post",
                    success:function (){
                        $("#table").load("${pageContext.request.contextPath}/admin/clientView.jsp #table");
                        $("#split").load("${pageContext.request.contextPath}/admin/clientView.jsp #split");
                    }
                });
            }
        }
        function getClient(clientId){
            $.ajax({
                url:"${pageContext.request.contextPath}/client/getClientById.action",
                data:{"clientId":clientId},
                type:"get",
                dataType:'json',
                success:function (data) {
                    $("#id2").val(data.clientId);
                    $("#password2").val(data.clientPassword);
                    $("#name2").val(data.clientName);
                    $("#sex2").val(data.clientSex);
                    $("#phone2").val(data.clientPhone);
                    $("#level2").val(data.clientLevel)
                }
            })
        }
    </script>
</head>

<body>
<!-- 导航条 -->
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- 屏幕自适应 -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">信息管理系统<small> V1.0</small></a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <!-- 导航条最右边 -->
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">欢迎: <span class="text-danger">${name}</span></a></li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">个人中心<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">我的积分</a></li>
                        <!-- 分隔线 -->
                        <li role="separator" class="divider"></li>
                        <li><a href="#">修改密码</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="#">我的消息</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>
<!-- 页面中心内容 -->
<div class="row">
    <div class="col-md-2">
        <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
            <!-- 一个面板 -->
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingOne">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                            <span class="glyphicon glyphicon-knight"></span>员工管理
                        </a>
                    </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                        <!-- 列表组 -->
                        <ul class="list-group">
                            <li class="list-group-item"><a href="${pageContext.request.contextPath}/staff/selectStaff.action">员工列表</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 一个面板 -->
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingTwo">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
                            <span class="glyphicon glyphicon-user"></span>客户管理
                        </a>
                    </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingTwo">
                    <div class="panel-body">
                        <!-- 列表组 -->
                        <ul class="list-group">
                            <li class="list-group-item"><a href="${pageContext.request.contextPath}/client/selectClient.action">客户列表</a></li>
                        </ul>
                        <ul class="list-group">
                            <li class="list-group-item"><a href="${pageContext.request.contextPath}/clientProject/selectClientProject.action">所带项目</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 一个面板 -->
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingThree">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
                            <span class="glyphicon glyphicon-user"></span>经理管理
                        </a>
                    </h4>
                </div>
                <div id="collapseThree" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingThree">
                    <div class="panel-body">
                        <!-- 列表组 -->
                        <ul class="list-group">
                            <li class="list-group-item"><a href="${pageContext.request.contextPath}/manager/selectManager.action">经理列表</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 一个面板 -->
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingFour">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="true" aria-controls="collapseFour">
                            <span class="glyphicon glyphicon-user"></span>领导管理
                        </a>
                    </h4>
                </div>
                <div id="collapseFour" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingThree">
                    <div class="panel-body">
                        <!-- 列表组 -->
                        <ul class="list-group">
                            <li class="list-group-item"><a href="${pageContext.request.contextPath}/director/selectDirector.action">领导列表</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 一个面板 -->
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingFive">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="true" aria-controls="collapseFive">
                            <span class="glyphicon glyphicon-user"></span>部门管理
                        </a>
                    </h4>
                </div>
                <div id="collapseFive" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingThree">
                    <div class="panel-body">
                        <!-- 列表组 -->
                        <ul class="list-group">
                            <li class="list-group-item"><a href="${pageContext.request.contextPath}/department/selectDepartment.action">部门列表</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 一个面板 -->
            <div class="panel panel-default">
                <div class="panel-heading" role="tab" id="headingSix">
                    <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="true" aria-controls="collapseSix">
                            <span class="glyphicon glyphicon-user"></span>项目管理
                        </a>
                    </h4>
                </div>
                <div id="collapseSix" class="panel-collapse collapse " role="tabpanel" aria-labelledby="headingSix">
                    <div class="panel-body">
                        <!-- 列表组 -->
                        <ul class="list-group">
                            <li class="list-group-item"><a href="${pageContext.request.contextPath}/project/selectProject.action">项目列表</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-10">
        <!-- 页头 -->
        <div class="page-header" style="margin-top: -20px;margin-bottom: 0px;">
            <h3>客户管理</h3>
        </div>
        <!-- 标签页 -->
        <div>
            <!-- Nav tabs -->
            <ul class="nav nav-tabs list-unstyled" role="tablist">
                <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">客户列表</a></li>
                <li><button class="btn btn-success btn-sm"  data-toggle="modal" data-target="#insertUserModal" style="margin-top: 6px;">添加客户信息</button></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content" id="split">
                <div role="tabpanel" class="tab-pane active" id="home">
                    <!-- 用户表格 -->
                    <table id="table" class="table table-bordered table-hover table-striped">
                        <tr>
                            <th>姓名</th>
                            <th>性别</th>
                            <th>电话</th>
                            <th>等级</th>
                            <th>操作</th>
                        </tr>
                        <c:forEach items="${info.list}" var="p">
                            <tr>
                                <td>${p.clientName}</td>
                                <td>${p.clientSex}</td>
                                <td>${p.clientPhone}</td>
                                <td>${p.clientLevel}</td>
                                <td>
                                    <a href="" class="btn btn-danger btn-sm" onclick="del('${p.clientId}')">删除</a>
                                    <a onclick="getClient('${p.clientId}')" data-toggle="modal" data-target="#updateUserModal" class="btn btn-info btn-sm">修改</a>
                                </td>
                            </tr>
                        </c:forEach>
                    </table>

                    <!-- 分页工具栏 -->
                    <div class="pull-right">
                        <nav aria-label="Page navigation">
                            <ul class="pagination">
                                <li>
                                    <a href="javascript:ajaxsplit(${info.prePage})" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <c:forEach begin="1" end="${info.pages}" var="i">
                                    <c:if test="${info.pageNum==i}">
                                        <li class="active">
                                            <a href="javascript:ajaxsplit(${i})">${i}</a>
                                        </li>
                                    </c:if>
                                    <c:if test="${info.pageNum!=i}">
                                        <li>
                                            <a href="javascript:ajaxsplit(${i})">${i}</a>
                                        </li>
                                    </c:if>
                                </c:forEach>
                                <li>
                                    <a href="javascript:ajaxsplit(${info.nextPage})" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<!-- 添加用户的对话框 ,添加id为insertUserModel-->
<div class="modal fade" tabindex="-1" role="dialog" id="insertUserModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">保存客户信息</h4>
            </div>
            <div class="modal-body">
                <form  id="insertForm" action="${pageContext.request.contextPath}/client/insert.action">
                    <div class="form-group">
                        <label for="id">账号</label>
                        <input type="text" class="form-control"name="clientId" id="id" placeholder="账号">
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <input type="password" class="form-control" name="clientPassword" id="password" placeholder="密码">
                    </div>
                    <div class="form-group">
                        <label for="name">姓名</label>
                        <input type="text" class="form-control" name="clientName" id="name" placeholder="姓名">
                    </div>

                    <div class="form-group">
                        <label for="sex">性别</label>
                        <input type="text" class="form-control" name="clientSex" id="sex" placeholder="性别">
                    </div>

                    <div class="form-group">
                        <label for="phone">电话</label>
                        <input type="text" class="form-control" name="clientPhone" id="phone" placeholder="电话">
                    </div>
                    <div class="form-group">
                        <label for="level">等级</label>
                        <input type="text" class="form-control" name="clientLevel" id="level" placeholder="等级">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消添加</button>
                <button type="button" class="btn btn-primary" id="insertBtn" onclick="insertSubmit()">确认添加</button>
            </div>
        </div>
    </div>
</div>
<!-- 更新用户的模态框，id为updateUserModal -->
<div class="modal fade" tabindex="-1" role="dialog" id="updateUserModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">保存员工信息</h4>
            </div>
            <div class="modal-body">
                <form method="post" action="${pageContext.request.contextPath}/client/update.action" id="updateForm">
                    <div class="form-group">
                        <label for="id2">账号</label>
                        <input readonly type="text" class="form-control" name="clientId" id="id2" placeholder="账号">
                    </div>
                    <div class="form-group">
                        <input  type="hidden" class="form-control" name="clientPassword" id="password2" placeholder="密码">
                    </div>
                    <div class="form-group">
                        <label for="name2">姓名</label>
                        <input  type="text" class="form-control" name="clientName" id="name2" placeholder="姓名">
                    </div>
                    <div class="form-group">
                        <label for="sex2">性别</label>
                        <input type="text" class="form-control" name="clientSex" id="sex2" placeholder="性别">
                    </div>
                    <div class="form-group">
                        <label for="phone2">电话</label>
                        <input type="text" class="form-control" name="clientPhone" id="phone2" placeholder="电话">
                    </div>
                    <div class="form-group">
                        <label for="level2">等级</label>
                        <input type="text" class="form-control" name="clientLevel" id="level2" placeholder="等级">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消更新</button>
                <button type="button" class="btn btn-primary" onclick="updateSubmit()">确认更新</button>
            </div>
        </div>
    </div>
</div>
</body>

</html>

